<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta NAME="author" CONTENT="Andras Volford, Peter Csizmadia">
<link REL ="stylesheet" TYPE="text/css" HREF="../../../marvinmanuals.css" TITLE="Style">
<title>MarvinView Example - Coloring atom and bond sets</title>
</head>
<body onLoad="links_set_search(location.search)">

<h1>MarvinView Example - Coloring atom and bond sets</h1>

This example demonstrates how to color sets of atoms and bonds in the molecule
using JavaScript.
<p>

<center>
<script type="text/javascript" LANGUAGE="JavaScript">
<!--
function showM(s) {
	if(document.MView != null) {
		document.MView.selectAllAtoms(0, false); // clear selection
		document.MView.setM(0, "../../../mols-2d/" + s + ".csmol");
	} else {
		alert("Cannot set molecule:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
//-->
</script>

<form action="http://www.chemaxon.com" onSubmit="return false">
<table CELLSPACING=5 CELLPADDING=0 BORDER=0>
<tr>
<td><input TYPE=BUTTON VALUE="Caffeine" onClick="showM('caffeine')"></td>
<td><input TYPE=BUTTON VALUE="Adrenaline" onClick="showM('l-adrenaline')"></td>
<td><input TYPE=BUTTON VALUE="Aspirin" onClick="showM('aspirin')"></td>
<td><input TYPE=BUTTON VALUE="Vitamin C" onClick="showM('vitaminc')"></td>
</tr>
</table>
</form>

<p>
<script type="text/javascript" LANGUAGE="JavaScript1.1" SRC="../../../marvin.js">
</script>
<script type="text/javascript" LANGUAGE="JavaScript1.1">
<!--
function selectAllAtoms() {
	if(document.MView != null) {
		var set = document.SelForm.AtomColor.selectedIndex + 1;
		for (var i = 0; i < document.MView.getAtomCount(0); i++) {
		    document.MView.setAtomSetSeq(0, i, set);
		}
	} else {
		alert("Cannot select atoms:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
function unselectAllAtoms() {
	if(document.MView != null) {
		for (var i = 0; i < document.MView.getAtomCount(0); i++) {
		    document.MView.setAtomSetSeq(0, i, 0);
		}
	} else {
		alert("Cannot unselect atoms:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
function selectAtom() {
	if(document.MView != null) {
		var set = document.SelForm.AtomColor.selectedIndex + 1;
		var atom = document.SelForm.AtomNumber.value - 1;
		document.MView.setAtomSetSeq(0, atom, set);
	} else {
		alert("Cannot select atom:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
function unselectAtom() {
	if(document.MView != null) {
		var atom = document.SelForm.AtomNumber.value - 1;
		document.MView.setAtomSetSeq(0, atom, 0);
	} else {
		alert("Cannot unselect atom:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
function selectAllBonds() {
	if(document.MView != null) {
		var set = document.SelForm.BondColor.selectedIndex + 1;
		document.MView.setBondSetSeqAll(0, set);
	} else {
		alert("Cannot select bonds:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
function unselectAllBonds() {
	if(document.MView != null) {
		document.MView.setBondSetSeqAll(0, 0);
	} else {
		alert("Cannot unselect bonds:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
function selectBond() {
	if(document.MView != null) {
		var set = document.SelForm.BondColor.selectedIndex + 1;
		var atom1 = document.SelForm.AtomNumber1.value - 1;
		var atom2 = document.SelForm.AtomNumber2.value - 1;
		document.MView.setBondSetSeq(0, atom1, atom2, set);
	} else {
		alert("Cannot select bond:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
function unselectBond() {
	if(document.MView != null) {
		var atom1 = document.SelForm.AtomNumber1.value - 1;
		var atom2 = document.SelForm.AtomNumber2.value - 1;
		document.MView.setBondSetSeq(0, atom1, atom2, 0);
	} else {
		alert("Cannot unselect bond:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
mview_name = "MView";
mview_begin("../../..", 200, 200);
mview_param("colorScheme", "mono");
mview_param("background", "#ffffff");
mview_param("molbg", "#ffffff");
mview_param("atomNumbersVisible",true);
mview_param("atomSetColor1", "#ff0000");
mview_param("atomSetColor2", "#00ff00");
mview_param("atomSetColor3", "#0000ff");
mview_param("bondSetColor1", "#ff0000");
mview_param("bondSetColor2", "#00ff00");
mview_param("bondSetColor3", "#0000ff");
mview_param("atomSet0.1", "0,1,3,8,9");
mview_param("mol", "../../../mols-2d/caffeine.csmol");
mview_param("loadMols",
 "../../../mols-2d/caffeine.csmol,"
+"../../../mols-2d/l-adrenaline.csmol,"
+"../../../mols-2d/aspirin.csmol,"
+"../../../mols-2d/vitaminc.csmol");
mview_end();
//-->
</script>
<p>
<form action="http://www.chemaxon.com" onSubmit="return false" NAME="SelForm">
<table CELLSPACING=5 CELLPADDING=0 BORDER=0>
<tr>
<td COLSPAN=5>Select atom or bond and its color</td>
</tr>
<tr>
<td><input TYPE=BUTTON VALUE="Select All" onClick="selectAllAtoms()"></td>
<td><input TYPE=BUTTON VALUE="Unselect All" onClick="unselectAllAtoms()"></td>
<td><SELECT name="AtomColor">
   <OPTION>Red
   <OPTION>Green
   <OPTION>Blue
</SELECT></td>
<td>Atom Number:</td>
<td><input TYPE=TEXT SIZE=4 VALUE="" NAME="AtomNumber"></td>
<td>&nbsp;</td>
<td><input TYPE=BUTTON VALUE="Select" onClick="selectAtom()"></td>
<td><input TYPE=BUTTON VALUE="Unselect" onClick="unselectAtom()"></td>
</tr>
<tr>
<td><input TYPE=BUTTON VALUE="Select All" onClick="selectAllBonds()"></td>
<td><input TYPE=BUTTON VALUE="Unselect All" onClick="unselectAllBonds()"></td>
<td><SELECT name="BondColor">
   <OPTION>Red
   <OPTION>Green
   <OPTION>Blue
</SELECT></td>
<td>Bond Endpoints:</td>
<td><input TYPE=TEXT SIZE=4 VALUE="" NAME="AtomNumber1"></td>
<td><input TYPE=TEXT SIZE=4 VALUE="" NAME="AtomNumber2"></td>
<td><input TYPE=BUTTON VALUE="Select" onClick="selectBond()"></td>
<td><input TYPE=BUTTON VALUE="Unselect" onClick="unselectBond()"></td>
</tr>
<tr>
<td COLSPAN=5><small>Right click, then choose Misc -&gt; Atom Numbers
    to see the atom numbers</small></td>
</tr>
</table>
</form>
</center>

<p>
Molecule loading is explained in the <A HREF="selection.html">previous</A> example.
<p>
The atom selection is handled by the following JavaScript functions:
<blockquote>
<pre>
<strong>&lt;script LANGUAGE</strong>=&quot;JavaScript1.1&quot; <strong>SRC</strong>=&quot;../../../<a HREF="../marvin.js.txt">marvin.js</a>&quot;<strong>&gt;</strong><strong>&lt;/script&gt;</strong>
<strong>&lt;script LANGUAGE</strong>=&quot;JavaScript1.1&quot;<strong>&gt;</strong>
<strong>&lt;!--</strong>
function <strong>selectAllAtoms()</strong> {
	if(document.MView != null) {
		var set = document.SelForm.AtomColor.selectedIndex + 1;
		for (var i = 0; i &lt; document.MView.<a HREF="../../../help/developer/applets/api/JMView.html#getAtomCount(int)">getAtomCount(0)</a>; i++) {
		    document.MView.<a HREF="../../../help/developer/applets/api/JMView.html#setAtomSetSeq(int, int, int)">setAtomSetSeq(0, i, set)</a>;
		}
	} else {
		alert(&quot;Cannot select atoms:\n&quot;+
		      &quot;no JavaScript to Java communication in your browser.\n&quot;);
	}
}

function <strong>unselectAllAtoms()</strong> {
	if(document.MView != null) {
		for (var i = 0; i &lt; document.MView.<a HREF="../../../help/developer/applets/api/JMView.html#getAtomCount(int)">getAtomCount(0)</a>; i++) {
		    document.MView.<a HREF="../../../help/developer/applets/api/JMView.html#setAtomSetSeq(int, int, int)">setAtomSetSeq(0, i, 0)</a>;
		}
	} else {
		alert(&quot;Cannot unselect atoms:\n&quot;+
		      &quot;no JavaScript to Java communication in your browser.\n&quot;);
	}
}
function <strong>selectAtom()</strong> {
	if(document.MView != null) {
		var set = document.SelForm.AtomColor.selectedIndex + 1;
		var atom = document.SelForm.AtomNumber.value - 1;
		document.MView.<a HREF="../../../help/developer/applets/api/JMView.html#setAtomSetSeq(int, int, int)">setAtomSetSeq(0, atom, set)</a>;
	} else {
		alert(&quot;Cannot select atom:\n&quot;+
		      &quot;no JavaScript to Java communication in your browser.\n&quot;);
	}
}
function <strong>unselectAtom()</strong> {
	if(document.MView != null) {
		var atom = document.SelForm.AtomNumber1.value - 1;
		document.MView.<a HREF="../../../help/developer/applets/api/JMView.html#setAtomSetSeq(int, int, int)">setAtomSetSeq(0, atom, 0)</a>;
	} else {
		alert(&quot;Cannot unselect atom:\n&quot;+
		      &quot;no JavaScript to Java communication in your browser.\n&quot;);
	}
}
function <strong>selectAllBonds()</strong> {
	if(document.MView != null) {
		var set = document.SelForm.BondColor.selectedIndex + 1;
		document.MView.<a HREF="../../../help/developer/applets/api/JMView.html#setBondSetSeqAll(int, int)">setBondSetSeqAll(0, set)</a>;
	} else {
		alert(&quot;Cannot select bonds:\n&quot;+
		      &quot;no JavaScript to Java communication in your browser.\n&quot;);
	}
}

function <strong>unselectAllBonds()</strong> {
	if(document.MView != null) {
		document.MView.<a HREF="../../../help/developer/applets/api/JMView.html#setBondSetSeqAll(int, int)">setBondSetSeqAll(0, 0)</a>;
		}
	} else {
		alert(&quot;Cannot unselect bonds:\n&quot;+
		      &quot;no JavaScript to Java communication in your browser.\n&quot;);
	}
}
function <strong>selectBond()</strong> {
	if(document.MView != null) {
		var set = document.SelForm.BondColor.selectedIndex + 1;
		var atom1 = document.SelForm.AtomNumber1.value - 1;
		var atom2 = document.SelForm.AtomNumber2.value - 1;
		document.MView.<a HREF="../../../help/developer/applets/api/JMView.html#setBondSetSeq(int, int, int, int)">setBondSetSeq(0, atom1, atom2, set)</a>;
	} else {
		alert(&quot;Cannot select bond:\n&quot;+
		      &quot;no JavaScript to Java communication in your browser.\n&quot;);
	}
}
function <strong>unselectBond()</strong> {
	if(document.MView != null) {
		var atom1 = document.SelForm.AtomNumber1.value - 1;
		var atom2 = document.SelForm.AtomNumber2.value - 1;
		document.MView.<a HREF="../../../help/developer/applets/api/JMView.html#setBondSetSeq(int, int, int, int)">setBondSetSeq(0, atom1, atom2, 0)</a>;
	} else {
		alert(&quot;Cannot unselect bond:\n&quot;+
		      &quot;no JavaScript to Java communication in your browser.\n&quot;);
	}
}
</pre>
</blockquote>
Note that the atom indices are in the 0, ..., n-1 range, where n is the total
number of atoms. So an atom index is one less than the atom number
(1, ..., n) that the user sees when (s)he selects View -&gt; Misc -&gt;
Atom Numbers.
<p>
In the applet tag, we specify the initial molecule,
the coloring scheme, the colors of the three different atom and bond sets
(red, greeen, blue) and the initial atom set for the red color:
<blockquote>
<pre>
<strong>mview_name</strong> = &quot;MView&quot;;
<strong>mview_begin(</strong>&quot;../../..&quot;<strong>,</strong> 200<strong>,</strong> 200<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#parameters.colorScheme">colorScheme</a>&quot;<strong>,</strong> &quot;mono&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#parameters.background">background</a>&quot;<strong>,</strong> &quot;#ffffff&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#parameters.molbg">molbg</a>&quot;<strong>,</strong> &quot;#ffffff&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#parameters.atomNumbersVisible">atomNumbersVisible</a>&quot;<strong>,</strong> &quot;true&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#parameters.atomSetColor">atomSetColor1</a>&quot;<strong>,</strong> &quot;#ff0000&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#parameters.atomSetColor">atomSetColor2</a>&quot;<strong>,</strong> &quot;#00ff00&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#parameters.atomSetColor">atomSetColor3</a>&quot;<strong>,</strong> &quot;#0000ff&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#parameters.bondSetColor">bondSetColor1</a>&quot;<strong>,</strong> &quot;#ff0000&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#parameters.bondSetColor">bondSetColor2</a>&quot;<strong>,</strong> &quot;#00ff00&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#parameters.bondSetColor">bondSetColor3</a>&quot;<strong>,</strong> &quot;#0000ff&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#parameters.atomSet">atomSet0.1</a>&quot;<strong>,</strong> &quot;0,1,3,8,9&quot;<strong>);</strong>
<strong>mview_param(</strong>&quot;<a HREF="../../../help/developer/viewman.html#parameters.mol">mol</a>&quot;<strong>,</strong> &quot;../../../mols-2d/caffeine.csmol&quot;<strong>);</strong>
<B>mview_end();</B>
<strong>//--&gt;</strong>
</pre>
</blockquote>
<p>
Finally, the form used to select atoms is the following:
<blockquote>
<pre>
<strong>&lt;form onSubmit</strong>="return false" <strong>NAME</strong>="SelForm"<strong>&gt;</strong>
<strong>&lt;table CELLSPACING</strong>=5 <strong>CELLPADDING</strong>=0 <strong>BORDER</strong>=0<strong>&gt;</strong>
<strong>&lt;tr&gt;</strong>
<strong>&lt;td COLSPAN</strong>=5<strong>&gt;</strong>Select atom or bond and its color<strong>&lt;td&gt;</strong>
<strong>&lt;/tr&gt;</strong>
<strong>&lt;tr&gt;</strong>
<strong>&lt;td&gt;&lt;input TYPE</strong>=BUTTON <strong>VALUE</strong>="Select All" <strong>onClick</strong>="selectAllAtoms()"<strong>&gt;&lt;/td&gt;</strong>
<strong>&lt;td&gt;&lt;input TYPE</strong>=BUTTON <strong>VALUE</strong>="Unselect All" <strong>onClick</strong>="unselectAllAtoms()"<strong>&gt;&lt;/td&gt;</strong>
<strong>&lt;td&gt;</strong><strong>&lt;SELECT name</strong>="AtomColor"<strong>&gt;</strong>
       <strong>&lt;OPTION&gt;</strong>Red
       <strong>&lt;OPTION&gt;</strong>Green
       <strong>&lt;OPTION&gt;</strong>Blue
<strong>&lt;/SELECT&gt;&lt;/td&gt;</strong>
<strong>&lt;td&gt;</strong>Atom Number:<strong>&lt;/td&gt;</strong>
<strong>&lt;td&gt;&lt;input TYPE</strong>=TEXT <strong>SIZE</strong>=4 <strong>VALUE</strong>="" <strong>NAME</strong>="AtomNumber"<strong>&gt;&lt;/td&gt;</strong>
<strong>&lt;td&gt;&lt;/td&gt;</strong>
<strong>&lt;td&gt;&lt;input TYPE</strong>=BUTTON <strong>VALUE</strong>="Select" <strong>onClick</strong>="selectAtom()"<strong>&gt;&lt;/td&gt;</strong>
<strong>&lt;td&gt;&lt;input TYPE</strong>=BUTTON <strong>VALUE</strong>="Unselect" <strong>onClick</strong>="unselectAtom()"<strong>&gt;&lt;/td&gt;</strong>
<strong>&lt;/tr&gt;</strong>
<strong>&lt;tr&gt;</strong>
<strong>&lt;td&gt;&lt;input TYPE</strong>=BUTTON <strong>VALUE</strong>="Select All" <strong>onClick</strong>="selectAllBonds()"<strong>&gt;&lt;/td&gt;</strong>
<strong>&lt;td&gt;&lt;input TYPE</strong>=BUTTON <strong>VALUE</strong>="Unselect All" <strong>onClick</strong>="unselectAllBonds()"<strong>&gt;&lt;/td&gt;</strong>
<strong>&lt;td&gt;</strong><strong>&lt;SELECT name</strong>="BondColor"<strong>&gt;</strong>
       <strong>&lt;OPTION&gt;</strong>Red
       <strong>&lt;OPTION&gt;</strong>Green
       <strong>&lt;OPTION&gt;</strong>Blue
<strong>&lt;/SELECT&gt;&lt;/td&gt;</strong>
<strong>&lt;td&gt;</strong>Bond Endpoints:<strong>&lt;/td&gt;</strong>
<strong>&lt;td&gt;&lt;input TYPE</strong>=TEXT <strong>SIZE</strong>=4 <strong>VALUE</strong>="" <strong>NAME</strong>="AtomNumber1"<strong>&gt;&lt;/td&gt;</strong>
<strong>&lt;td&gt;&lt;input TYPE</strong>=TEXT <strong>SIZE</strong>=4 <strong>VALUE</strong>="" <strong>NAME</strong>="AtomNumber2"<strong>&gt;&lt;/td&gt;</strong>
<strong>&lt;td&gt;&lt;input TYPE</strong>=BUTTON <strong>VALUE</strong>="Select" <strong>onClick</strong>="selectBond()"<strong>&gt;&lt;/td&gt;</strong>
<strong>&lt;td&gt;&lt;input TYPE</strong>=BUTTON <strong>VALUE</strong>="Unselect" <strong>onClick</strong>="unselectBond()"<strong>&gt;&lt;/td&gt;</strong>
<strong>&lt;/tr&gt;</strong>
<strong>&lt;tr&gt;</strong>
<strong>&lt;td</strong> <strong>COLSPAN</strong>=5<strong>&gt;&lt;small&gt;</strong>Right click, then choose Misc -&gt; Atom Numbers
    to see the atom numbers<strong>&lt;/small&gt;&lt;td&gt;</strong>
<strong>&lt;/tr&gt;</strong>
<strong>&lt;/table&gt;</strong>
<strong>&lt;/form&gt;</strong>
</pre>
</blockquote>

<p>
<center><div class="lenia">&nbsp;</div></center>
<p>
The next example shows
<a HREF="stereoconfig.html">East Asian character support</a> in applet parameters.

</body>
</html>
